<template>
  <div class="container">
    <el-form
      :inline="true"
      :model="partnerform1"
      ref="partnerform1"
      class="demo-form-inline"
    >
      <el-form-item label="合作商搜索">
        <el-input v-model="partnerform1.name" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="app-container">
      <!-- 角色管理内容 -->
      <div class="role-operate">
        <el-button
          @click="newAndChange('新建')"
          size="mini"
          icon="el-icon-circle-plus-outline"
          style="background-color: #ff8437; color: #fff"
          >新建</el-button
        >
      </div>
      <el-table :data="partnerList">
        <!-- 放置列 -->
        <el-table-column
          prop="index"
          align="center"
          width="50px"
          label="序号"
        />
        <el-table-column prop="name" align="center" label="合作商名称" />
        <el-table-column prop="mobile" align="center" label="账号" />
        <el-table-column prop="account" align="center" label="设备数量" />
        <el-table-column prop="ratio1" align="center" label="分成比例" />
        <el-table-column prop="contact" align="center" label="联系人" />
        <el-table-column prop="mobile" align="center" label="联系电话" />
        <el-table-column align="center" width="300px" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="changepassword(row.id)"
              >重置密码</el-button
            >
            <el-button size="mini" type="text" @click="details(row)"
              >查看详情</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="newAndChange('修改', row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              style="color: red"
              @click="del(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增合作商的dialog -->
      <el-dialog
        title="新增合作商"
        :visible.sync="dialogFormVisible"
        @close="closefn"
      >
        <el-form
          :model="addPartnerForm"
          :rules="rules"
          label-width="100px"
          ref="partnerform"
        >
          <el-form-item label="合作商名称" prop="name">
            <el-input
              v-model="addPartnerForm.name"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input
              v-model="addPartnerForm.contact"
              maxlength="10"
              show-word-limit
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile">
            <el-input
              v-model="addPartnerForm.mobile"
              maxlength="11"
              minlength="11"
              show-word-limit
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="分成比例（%）" prop="ratio">
            <el-input-number
              v-model="addPartnerForm.ratio"
              controls-position="right"
              placeholder="请输入"
              style="width: 80%; display: flex; flex-direction: column"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label="账号" prop="account" v-if="model === '新建'">
            <el-input
              v-model="addPartnerForm.account"
              maxlength="18"
              show-word-limit
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" v-if="model === '新建'">
            <el-input
              v-model="addPartnerForm.password"
              maxlength="20"
              show-word-limit
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quitfn">取 消</el-button>
          <el-button type="primary" @click="submitfn">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 合作商详情的dialog -->
      <el-dialog
        title="区域详情"
        :visible.sync="showAreadetails"
        @close="showAreadetails = false"
      >
        <div class="area">
          <span class="title"
            >合作商名称:<span class="right">{{ nodelist.name }}</span></span
          >

          <span class="title"
            >联系人:<span class="right">{{ nodelist.contact }}</span></span
          >

          <span class="title"
            >联系电话:<span class="right">{{ nodelist.mobile }}</span></span
          >
          <span class="title"
            >分成比例:<span class="right">{{ nodelist.ratio1 }}</span></span
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getPartnerList,
  addpartner,
  delPartner,
  changePartnerPwd,
  changeAreaDetails,
  changePartnerDetails,
} from "@/api/node";
export default {
  name: "Node",
  components: {},
  data() {
    return {
      model: "新建",
      showAreadetails: false,
      dialogFormVisible: false,
      totalcount: "",
      totalpage: "",
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      addPartnerForm: {
        name: "",
        contact: "",
        mobile: "",
        ratio: "",
        account: "",
        password: "",
      },
      partnerform1: {
        name: "",
      },
      nodelist: {},
      partnerList: [],
      rules: {
        name: [{ required: true, message: "请输入", trigger: "submit" }],
        contact: [{ required: true, message: "请输入", trigger: "submit" }],
        mobile: [{ required: true, message: "请输入", trigger: "submit" }],
        ratio: [{ required: true, message: "请输入", trigger: "submit" }],
        account: [{ required: true, message: "请输入", trigger: "submit" }],
        password: [{ required: true, message: "请输入", trigger: "submit" }],
      },
    };
  },
  async created() {
    this.getPartnerList();
  },
  methods: {
    async getPartnerList() {
      const res = await getPartnerList(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.partnerform1.name
      );
      this.partnerList = res.currentPageRecords;
      this.totalpage = res.totalPage;
      this.totalcount = res.totalCount;
      this.partnerList.forEach((item, index) => {
        this.$set(
          item,
          "index",
          this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1
        );
      });
      this.partnerList.forEach((item, index) => {
        this.$set(item, "ratio1", `${item.ratio}%`);
      });
    },
    search() {
      this.getPartnerList();
    },
    closefn() {
      this.$refs.partnerform.resetFields();
      this.dialogFormVisible = false;
    },
    quitfn() {
      this.closefn();
    },
    submitfn() {
      this.$refs.partnerform.validate(async (right) => {
        if (right) {
          if (!this.addPartnerForm.id) {
            await addpartner(this.addPartnerForm);
            this.$message.success("添加成功");
            this.pageParams.pageIndex = 1;
            this.getPartnerList();
            this.closefn();
          } else {
            const res = await changePartnerDetails(
              {
                account: this.addPartnerForm.account,
                contact: this.addPartnerForm.contact,
                mobile: this.addPartnerForm.mobile,
                name: this.addPartnerForm.name,
                ratio: this.addPartnerForm.ratio,
              },
              this.addPartnerForm.id
            );
            if (res == true) {
              this.$message.success("修改成功");
              (this.addPartnerForm = {
                name: "",
                contact: "",
                mobile: "",
                ratio: "",
                account: "",
                password: "",
              }),
                this.closefn();
              this.getPartnerList();
            }
          }
        } else {
          this.$message.error(new Error());
        }
      });
    },
    async details(row) {
      // console.log(row);
      this.nodelist = row;
      this.showAreadetails = true;
    },
    //修改密码
    changepassword(id) {
    this.$confirm('确认修改密码？')
      .then(async () => {
      this.getPartnerList()
      //  await changePartnerPwd(id)
       this.$message.success( '重置成功!');
        })
        .catch((err) => {
          console.log(err);    
        });
    },
    //新建and修改
    async newAndChange(model, row) {
      if (model == "新建") {
        this.model = model;
        this.dialogFormVisible = true;
      } else {
        this.model = model;
        console.log(row);
        this.addPartnerForm.account = row.account;
        this.addPartnerForm.contact = row.contact;
        this.addPartnerForm.mobile = row.mobile;
        this.addPartnerForm.name = row.name;
        this.addPartnerForm.ratio = row.ratio;
        this.addPartnerForm.id = row.id;
        this.dialogFormVisible = true;
      }
    },
   async del(id) {
    this.$confirm('???').then(async()=>{
      await delPartner(id)
       this.$message.success( '删除成功!');
     this.getPartnerList()
    })
    },
  },
};
</script>

<style lang="scss" scoped>
.role-operate {
  padding: 10px;
}
::v-deep .el-dialog {
  border-radius: 10px;
  padding: 20px;
  width: 50%;
  .dialog-footer {
    margin-top: -30px;
  }
  .area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .title {
    width: 50%;
    margin-bottom: 20px;
    .right {
      width: 80%;
      margin-left: 10px;
      .el-table {
        margin-top: -15px;
      }
    }
  }
}
</style>
